<template>
    <div class="news">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        热门咨询
      </div>
      <div class="content" ref="content">
        <div class="news-wrapper">
          <div class="wrapper" ref="news-wrapper">
            <div class="line-block-item" v-for="item in informations.infoList" @click="$router.push({path:'/iframeBox',query:{name:item.title,url:item.jumpUrl}})">
              <div class="block border-1px" v-if="item.imgUrls>1">
                <div class="name" style="margin-bottom: 10px;margin-top: 18px">{{item.title}}</div>
                <div class="imgs-wrapper">
                  <div class="img-wrapper" style="font-size: 0">
                    <img v-for="img in item.imgUrls" :src="img" alt="" :style="{height:newsItemHeight+'px'}">
                  </div>
                </div>
                <p class="text">{{item.creatTime}} {{item.clickRate}}热度</p>
              </div>
              <div class="row border-1px" v-if="item.imgUrls.length===1">
                <div class="left">
                  <div class="top">{{item.title}}</div>
                  <div class="bottom">{{item.creatTime}} {{item.clickRate}}热度</div>
                </div>
                <div class="right">
                  <img :src="item.imgUrls[0]" alt="" style="width: 100%;height: 76px">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import {getStorage} from "../../../common/js/localStorage";
  import BScroll from 'better-scroll'
    export default {
        name: "news",
        components:{
          'back':back
        },
        data(){
          return{
            informations:{}
          }
        },
        mounted() {
          this.informations = getStorage('informations')
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['content'],{
                click:true,
                pullUpLoad:{
                  threshold:-50
                }
              })
              scroll.on('pullingDown', () => {
                this.isRefresh = true
                setTimeout(()=>{
                  window.history.go(0)
                  scroll.finishPullDown();
                },600)
              });

            }else {
              this.scroll.refresh();
            }
          })
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .news
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      width 100%
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 42px)
      overflow hidden
      .news-wrapper
        padding 0 15px
        .name
          display flex
          height 17px
          margin-top 29px
          margin-bottom 18px
          line-height 17px
          .left,.right
            flex 1
          .left
            text-align left
            color #ffffff
            font-size 16px
          .right
            text-align right
            color #C4C4C4
            font-size 12px
  .row
    display flex
    padding 18px 0
    .left
      flex 1
      text-align left
      .top
        height 42px
        color #ffffff
        line-height 21px
        font-size 14px
      .bottom
        font-size 12px
        color #999999
        height 12px
        line-height 12px
        padding-top 18px
    .right
      flex 0 0 35%
      text-align right
      padding-left 16px
  .line-block-item
    .row
      border-1px (#343434)
    .block
      border-1px (#343434)
    &:last-child
      /*background #449fdb*/
      .block
        border-1px (#161719) !important
      .row
        border-1px (#161719) !important
</style>
